var CheckTypeForm = function () {
  var template = /*html*/ `
    <div class="check-type-form" v-loading.fullscreen.lock="loading">
      <div style="margin-bottom:10px">
        <el-button size="medium" type="primary" @click="addCheckType">新增检验类型</el-button>
      </div>
      <div class="check-type-form-table">
        <el-table fit border :data="checkTypeListData" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="行号" type="index" width="40px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="检验类型" prop="type" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateCheckType(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog append-to-body :title="dialogType==='add'?'新增检验类型':'修改检验类型'" :visible.sync="openForm" width="400px" top="calc(50vh - 110px)"
        :close-on-click-modal="false" @closed="dialogClosed">
        <div style="height:150px;overflow:auto">
          <check-type-dialog v-if="openForm" :type="dialogType" :init-value="initValue" @submit="toSaveCheckType"></check-type-dialog>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      checkTypeList: {
        type: Array,
        requied: true
      }
    },

    data: function () {
      return {
        loading: false,
        checkTypeListData: _.cloneDeep(this.checkTypeList),
        dialogType: '',
        openForm: false,
        initValue: '',
        selectCheckType: null
      };
    },

    methods: {
      addCheckType: function () {
        this.dialogType = 'add';
        this.initValue = '';
        this.openForm = true;
      },

      updateCheckType: function (checkType) {
        this.dialogType = 'update';
        this.initValue = checkType.type;
        this.selectCheckType = checkType;
        this.openForm = true;
      },

      toSaveCheckType: function (value, dialogType) {
        var checkType = undefined;
        var checkTypeListData = this.checkTypeListData;
        if (dialogType === 'add') {
          checkType = _.find(checkTypeListData, function (obj) {
            return obj.type === value;
          });
        } else {
          var selectCheckType = this.selectCheckType;
          checkType = _.find(checkTypeListData, function (obj) {
            return obj.type === value && selectCheckType.id !== obj.id;
          });
        }

        if (checkType !== undefined) {
          this.$alert('检验类型有重复', '信息');
          return;
        }

        if (dialogType === 'add') {
          this.toAddCheckType(value);
        } else {
          this.toUpdateCheckType(value);
        }
      },

      toAddCheckType: function (type) {
        this.loading = true;
        var self = this;
        ajaxRequest('materialCheckType/setCheckType', {
          checkArray: JSON.stringify([type])
        }).then(function () {
          return self.getAddCheckType(type).then(function (checkType) {
            if (checkType !== null) {
              self.checkTypeListData.push(checkType);
              self.checkTypeList.push(checkType);
            }
            self.openForm = false;
            self.loading = false;
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      toUpdateCheckType: function (type) {
        this.loading = true;
        var self = this;
        var checkType = this.selectCheckType;
        ajaxRequest('materialCheckType/updateCheckType', {
          id: checkType.id,
          checkType: type
        }).then(function () {
          var checkTypeListData = self.checkTypeListData;
          var index = checkTypeListData.indexOf(checkType);
          if (index > -1) {
            checkTypeListData[index].type = type;
            self.checkTypeList[index].type = type;
          }

          self.openForm = false;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getAddCheckType: function (type) {
        return ajaxRequest('materialCheckType/getCheckType').then(function (checkTypeList) {
          var checkType = _.findLast(checkTypeList, function (obj) {
            return obj.checkType = type;
          });
          if (checkType !== undefined) {
            return {
              id: checkType.id,
              type: checkType.checkType
            };
          }
          return null;
        });
      },

      dialogClosed: function () {
        this.dialogType = '';
        this.initValue = '';
        this.selectCheckType = null;
      }
    },

    components: {
      CheckTypeDialog: CheckTypeDialog
    },

    template: template
  };
}();
